/* CSS Document */

/* 

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

Class pertains to many elements, id is for a unique element. Element is preceded by "#" and class is preceded by ".". 

You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class, e.g. p.center (<p class=center>) versus .center (to apply a style to both <p class=center> and <h1 class=center>)

Note: Float is used with display:block; display:inline does not use float

Conflicts:
    * Vid konflikt med flera stilar gäller generellt att sista stilen vinner.
    * Om stilkonflikt råder mellan CLASS och ID kan man räkna ut vikten enligt följande:

      Räkna antal ID-förekomster i selectorn (a)
      Räkna antal CLASS-förekomster i selectorn (b)
      Räkna antal tags i selectorn (c)

      slå ihop talen (ej matematiskt)  a, b och c.
      Högst vikt avgör vem som vinner. 

LI           {...} a=0 b=0 c=1 -> vikt = 1
UL LI        {...} a=0 b=0 c=2 -> vikt = 2
UL OL LI     {...} a=0 b=0 c=3 -> vikt = 3
LI.red       {...} a=0 b=1 c=1 -> vikt = 11
UL OL LI.red {...} a=0 b=1 c=3 -> vikt = 13
#xyz         {...} a=1 b=0 c=0 -> vikt = 100 

*/

/* ENTIRE DIVISION: BANNER AND NAVS */	


.body {
		background: transparent url(bar.gif);
		background-repeat:repeat-x;
		}
		
#divNav {
		position:relative;
		display:block;
 		padding:0px; /* necessary for correct browser behavior */
		margin: 0 auto;   /* align for good browsers */
		background: transparent url(banner.jpg) no-repeat;
		top:0px;
		height: 235px; 
		width: 700px;
}

/* ENTIRE NAV AREA */
#divNav ul#nav {
		position:absolute;
		padding:0px;  /* necessary for correct browser behavior */
		margin:0px;  /* necessary for correct browser behavior */
		top:180px;
		left:70px;
		height:auto;
		width:auto;
}

/* LINKS OF ALL NAVS ANS SUBNAVS, ACTIVE AND INACTIVE */
ul#nav li a { 
		text-decoration: none;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size:80%;
		color: #000000;
		text-align:center;
		/*display:block creates linebreaks */
		padding: 0px;
	
}

/* NAV IMAGES */
#horizons_text, #formuslims_text,#training_text,#bookstore_text,#getinvolved_text,#contact_text   {
		border:0px;
		float:left;
		width:98px; /*width of floated box, edges touching each other */
		height:30px;
		margin:0px;
		padding:0px;
		padding-right:0px; /*padding between text and block*/
		margin-right:0px; /*distance between blocks */
}

/* NAV LINKS */
/*
ul#nav a#mainHorizons,
ul#nav a#mainMuslims,
ul#nav a#mainTraining,
ul#nav a#mainStore, 
ul#nav a#mainDonate,
ul#nav a#mainContact {
		position:relative;
		top:-5px;
		left:0px;
}
*/
	
ul#nav a#mainHorizons {
	/*modifies the nav links */
		position:absolute;
		top:-1px;
		left:0px;
}
ul#nav a#mainMuslims {
/*modifies the nav links */
		position:absolute;
		top:-1px;
		left:98px;
}
ul#nav a#mainTraining {
/*modifies the nav links */
		position:absolute;
		top:-1px;
		left:196px;
}
ul#nav a#mainStore {
/*modifies the nav links */
		position:absolute;
		top:-1px;
		left:294px;
}

ul#nav a#mainDonate {
/*modifies the nav links */
		position:absolute;
		top:-1px;
		left:392px;	
}
ul#nav a#mainContact {
/*modifies the nav links */
		position:absolute;
		top:-1px;
		left:490px;
}


/* ALL SUBNAV LINKS */
ul#nav ul a { 
		font-style:normal;
		font-family:Arial, Helvetica, sans-serif;
}

/*modifies the namegiven navs - AND SUBNAVS???????? */
ul#nav li#liHorizons, 
ul#nav li#liMuslims, 
ul#nav li#liTraining,
ul#nav li#liStore,
ul#nav li#liDonate,
ul#nav li#liContact { 
		float:left;
		width: 98px; /*width of floated box, edges touching each other */
		height: 30px;
		margin: 0px;
		display: block; /*eliminates list bullets */
		padding-right: 0px; /*padding between text and block*/
		margin-right: 0px; /*distance between blocks */		
}


/* ALL ACTIVE NAVS */
ul#nav li.on {
	background-image:url(active_tab.gif);
	}

/* ALL INACTIVE NAVS */
ul#nav li.off {
	background-image:url(inactive_tab.gif);
	}
	
/* NAMEGIVEN SUBNAVS */	
	
ul#nav li#liHorizons li, 
ul#nav li#liMuslims li,  
ul#nav li#liTraining li,  
ul#nav li#liStore li,  
ul#nav li#liDonate li, 
ul#nav li#liContact li { 
		position:relative;
		display: block; /*eliminates list bullets */
		float:left;
		left:-30px;
		top:0px;
		border:0px;
		width: auto; /*width of floated box, edges touching each other */
		height: 17px;
		margin: 0px;
		padding:0px;
		padding-right: 15px; /*padding between text and block*/
		background:none;
}

/* NAMEGIVEN NAV LINKS */
ul#nav li#liHorizons a, 
ul#nav li#liTraining a,  
ul#nav li#liStore a,  
ul#nav li#liContact a { 
		font-family:Arial, Helvetica, sans-serif;
		padding:0px;
		margin:0px;	
		padding-right: 9px; /*padding between text and block*/
		padding-left: 9px;
}
 
/* NAMEGIVEN SUBNAV LINKS */

ul#nav li#liHorizons ul /* or li */ a,
ul#nav li#liTraining ul a,  
ul#nav li#liStore ul a,  
ul#nav li#liDonate ul a, 
ul#nav li#liContact ul a { 
		font-family:Arial, Helvetica, sans-serif;
		padding:0px;
		margin:0px;	
		padding-right: 0px; /*padding between text and block*/
		padding-left: 0px;
		padding-bottom: 6px;
	
}

ul#nav li#liHorizons ul a { 
		position:relative;	
		left:0px;
		padding-right:15px;
}

ul#nav li#liTraining ul a { 
		position:relative;
		left:-30px;
		padding-right:15px;
}

ul#nav li#liStore ul a { 
		position:relative;
		left:290px;
		padding-right:15px;
}

ul#nav li#liDonate ul a { 
		position:relative;	
		left:380px;
		padding-right:15px;
}

ul#nav li#liContact ul a { 
		position:relative;	
		left:405px;
		padding-right:15px;
}


/* ACTIVE SUBNAV LINK IN THE ACTIVE NAV */
ul#nav li.on li.on2 a {
		font-style:italic;
		/* font-weight:bold; */
		font-family:Georgia, "Times New Roman", Times, serif;
}

/* ELIMINATES ALL SUBNAVS */
ul#nav ul { 
		display: none;
}

/* DISPLAYS SUBNAVS OF ACTIVE NAV */
ul#nav li.on ul { 
		display: block;
		width:auto;
}	

/* ENTIRE SUBNAV AREA - AS OPPOSED TO INDIVIDUAL ITEM */
ul#nav li.on ul, ul#nav li.off ul { 
		position:absolute;
		padding:0px;
		margin:0px;	
		top: 30px;
		left: 0px;
		padding-top: 0px;
		height: 17px;
		width: 775px;
		padding-left: 60px;
		margin-right:0px;
		background:url(subtabline.gif);
		background-repeat:repeat-x;
}
	

/* ACTIVE AND INACTIVE SUBNAV LINKS */
ul#nav li.on ul a, ul#nav li.off ul a {  
		font-family:Arial, Helvetica, sans-serif;
		font-size:100%;
		padding:0px;
		margin:0px;		
		border: 0px;
		color: #000000;
		width: auto;
		margin-right: 0px;
		padding-right:20px; /*can change linkarea padding */
		background:none;
	
}


/* MODIFIES SUBNAV AREA OF THE ACTIVE NAV WHEN THIS IS HOVERED OVER */
ul#nav li.on:hover ul, 
ul#nav li.over ul { /*for ie*/
		background:url(subtabline.gif);
}


/* MODIFIES NAV ANS SUBNAV LINKS OF THE ACTIVE NAV WHEN THIS (THE ACTIVE LIST) IS HOVERED OVER */
ul#nav li.on:hover a, 
ul#nav li.over a { /*for ie*/
		color:#000000;
}

/*MODIFIES THE ACTIVE NAV LINKS WHEN HOVERED OVER */
/* necessary to specify class! */
ul#nav li.on a:hover { 
		color: #000000;
}


/* MODIFIES THE SUBNAVS OF THE INACTIVE NAVS WHEN THEY ARE HOVERED OVER */
/* display: block;  This is where the inactive subnavs appear when inactive nav is hovered over!*/
/* ABOUT z-index: 6000; 
The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.

Note: Elements can have negative stack orders.

Note: Z-index only works on elements that have been positioned (eg position:absolute;)! */
#nav li.off:hover ul, 
#nav li.over ul { /* for ie */
		display:none;
}


/* MODIFIES ALL INACTIVE AND ACTIVE SUBNAV LINKS, RESPECTIVELY, WHEN HOVERD OVER;  naturally has precedence over #nav li.off a:hover,  #nav li.on a:hover  */
#nav li.off ul a:hover, 
#nav li.on ul a:hover { 
		color:#CC6600;
	}
	
#nav li.off:hover {
background-image:url(hover_tab.gif);
}